<template>
  <div>
    <el-container>
      <el-header style="height:80px">
        <el-row>
          <el-col :span="3" id="kong">
            <el-col :span="5" id="kong"></el-col>
            <el-col :span="16">
              <h3>餐饮系统</h3>
            </el-col>
          </el-col>

          <el-col :span="2" id="kong"></el-col>
          <el-col :span="8">
            <div>
              <el-col :span="4" id="touxiang">
                <img src="../assets/single/touxiang.png" alt="">
              </el-col>
              <el-col :span="16" id="zuo">
                <div>
                  <p>用户名:{{a}}</p>
                  <p>用户名ID:{{b}}</p>
                </div>
              </el-col>

            </div>
          </el-col>

        </el-row>

      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#FFFFFF" text-color="#333333">
                <el-menu-item index="1">
                  <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="2">
                  <span slot="title">菜品</span>
                </el-menu-item>
                <el-submenu index="3">
                  <template slot="title">
                    <span>库存</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="3-1">菜品库存</el-menu-item>
                    <el-menu-item index="3-2">库存盘点</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                  <template slot="title">
                    <span>促销</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="4-1">优惠券管理</el-menu-item>
                    <el-menu-item index="4-2">促销商品</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="5">
                  <span slot="title">订单</span>
                </el-menu-item>
                <el-submenu index="6">
                  <template slot="title">
                    <span>报表</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="6-1">菜品流水</el-menu-item>
                    <el-menu-item index="6-2">收银流水</el-menu-item>
                    <el-menu-item index="6-3">店铺营收</el-menu-item>
                    <el-menu-item index="6-4">用户数据</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="7">
                  <template slot="title">
                    <span>系统</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="7-1">门店配置</el-menu-item>
                    <el-menu-item index="7-2" route='/manage/system/tablelist'>桌位管理</el-menu-item>
                    <el-menu-item index="7-3">扫码点餐配置</el-menu-item>
                    <el-menu-item index="7-4">支付设置</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped lang='less'>
.el-header {
  color: #333333;
  line-height: 80px;
  padding: 0;
  #touxiang {
    height: 80px;
    line-height: 80px;

    img {
      height: 50px;
      vertical-align: middle;
      border-radius: 50%;
    }
  }
  h3 {
    font-size: 25px;
  }
  #zuo {
    height: 80px;
    line-height: 80px;
    div {
      display:inline-block;
      vertical-align: middle;
      p {
        font-size: 14px;
        height: 20px;
        line-height: 20px;
      }
    }
  }
}
#kong {
  height: 1px;
}
.el-aside {
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  color: #333;
}
</style>
<script>
export default {
  data: function () {
    return {
      a: "管理员",
      b: 123456
    };
  },
  methods: {
    handleOpen() {},
    handleClose() {},
  }
};
</script>
